import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

export const mainTable: RouteRecordRaw[] = [
    {
        path: '/home',
        name: 'Home',
        component: _ => import('../views/Home.vue'),
        props: { idName: true },
        meta: {
            title: '首页'
        }
    },
    {
        path: '/about',
        name: 'About',
        component: _ => import('../views/About.vue'),
        meta: {
            title: '关于'
        }
    },
    {
        path: '/hotArea',
        name: 'HotArea',
        component: _ => import('../views/HotArea/index.vue'),
        meta: {
            title: '热区'
        }
    },
    {
        path: '/todo',
        name: 'Todo',
        component: _ => import('../views/Todo/TodoList.vue'),
        meta: {
            title: 'TODO列表'
        },
        children: [
            {
                path: '/detail',
                name: 'TodoDetail',
                component: _ => import('../views/Todo/detail.vue'),
                meta: {
                    title: 'TODO详情'
                },
            }
        ]
    },
    {
        path: '/editor',
        name: 'editor',
        component: _ => import('../views/Editor/index.vue'),
        meta: {
            title: '编辑区'
        },
    },
    {
        path: '/lifecycle',
        name: 'lifecycle',
        component: _ => import ('../views/Lifecycle/index.vue'),
        meta: {
            title: 'vue生命周期'
        },
    },
    {
        path: '/hook',
        name: 'hook',
        component: _ => import('../views/Hook/index.vue'),
        meta: {
            title: '状态管理Hook'
        },
    },
    {
        path: '/store',
        name: 'store',
        component: _ => import('../views/Store/index.vue'),
        meta: {
            title: '共享状态管理'
        },
    },
    {
        path: '/slot',
        name: 'slot',
        component: _ => import('../views/Slot/index.vue'),
        meta: {
            title: 'Slot'
        },
    },
    {
        path: '/ref',
        name: 'ref',
        component: _ => import('../views/Ref/index.vue'),
        meta: {
            title: 'Ref'
        },
    },
    {
        path: '/drag',
        name: 'drag',
        component: _ => import('../views/DraggableDemo/index.vue'),
        meta: {
            title: 'DraggableDemo'
        },
    },
    {
        path: '/customComp',
        name: 'customComp',
        component: _ => import('../views/customComp/index.vue'),
        meta: {
            title: '动态组件校验'
        },
    },
    {
        path: '/watch',
        name: 'watch',
        component: _ => import('../views/Watch/index.vue'),
        meta: {
            title: '数据的侦听'
        },
    },
    {
        path: '/unref',
        name: 'unref',
        component: _ => import('../views/Unref/index.vue'),
        meta: {
            title: '响应转普通数据'
        },
    },
    {
        path: '/proxy',
        name: 'proxy',
        component: _ => import('../views/Proxy/index.vue'),
        meta: {
            title: 'Proxy'
        },
    },
    {
        path: '/bem',
        name: 'bem',
        component: _ => import('../views/Bem/index.vue'),
        meta: {
            title: 'BEM布局'
        },
    },{
        path: '/water-full',
        name: 'waterFull',
        component: _ => import('../views/WaterFull/index.vue'),
        meta: {
            title: '瀑布流'
        },
    },
    {
        path: '/tree',
        name: 'tree',
        component: _ => import('../views/Tree/index.vue'),
        meta: {
            title: '组件递归'
        },
    },
]